<script lang="ts">
export default {
  name: "ExpenditureBar"
};
</script>

<script setup lang="ts">
import { ECharts } from "echarts";
import echarts from "/@/plugins/echarts";
import { onMounted, nextTick, ref, watch } from "vue";
import { tryOnUnmounted, useTimeoutFn } from "@vueuse/core";

import {
  addResizeListener,
  removeResizeListener
} from "element-plus/lib/utils/resize-event";

const props = defineProps({
  echartData: {
    type: Array,
    default: () => []
  }
});

let echartInstance: ECharts;

const ExpenditureBar = ref<HTMLElement | null>(null) as any;
const chart = ref<HTMLElement | null>(null) as any;

function initechartInstance(data1, data2, data3, data4) {
  const echartDom = chart.value;
  if (!echartDom) return;
  // @ts-ignore
  echartInstance = echarts.init(echartDom);
  echartInstance.clear(); //清除旧画布 重新渲染

  echartInstance.setOption({
    color: ["#00e6ad", "#59a0ff", "#ffc500"],
    grid: {
      left: 100
    },
    // tooltip: {
    //   trigger: "axis",
    //   axisPointer: {
    //     type: "shadow"
    //   }
    // },

    // legend: {
    //   // orient: "vertical",
    //   data: ["预算金额", "实际金额"]
    // },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999"
        }
      }
    },
    // toolbox: {
    //   feature: {
    //     dataView: { show: true, readOnly: false },
    //     magicType: { show: true, type: ["line", "bar"] },
    //     restore: { show: true },
    //     saveAsImage: { show: true }
    //   }
    // },
    legend: {
      top: 20,
      data: ["预算金额", "实际金额", "预算执行率"]
    },
    xAxis: [
      {
        splitLine: {
          show: false
        },
        type: "category",
        data: data1,
        axisPointer: {
          type: "shadow"
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "",
        axisLine: {
          show: true
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          formatter: "{value} (元)"
        }
      },
      {
        type: "value",
        name: "",
        axisLine: {
          show: true
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          formatter: "{value}%"
        }
      }
    ],
    series: [
      {
        name: "预算金额",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: data2
      },
      {
        name: "实际金额",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: data3
      },
      {
        name: "预算执行率",
        type: "line",
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + "%";
          }
        },
        data: data4
      }
    ]
  });
}

// const initProjectNum = async () => {
//   try {
//     const { code, data } = await getHomeStatictis({});
//     if (code === 200) {
//       nextTick(() => {
//         initechartInstance(data[0], data[1], data[2], data[3]);
//       });
//     }
//   } catch (err) {
//     console.log(err);
//   }
// };

// initProjectNum();

// onBeforeMount(() => {
//   nextTick(() => {
//     initechartInstance();
//   });
// });

onMounted(() => {
  nextTick(() => {
    addResizeListener(ExpenditureBar.value, resetRender);
    // useEventListener("resize", () => {
    //   resetRender();
    // });
  });
});

watch(
  () => props.echartData,
  newVal => {
    if (newVal.length) {
      nextTick(() => {
        initechartInstance(newVal[0], newVal[1], newVal[2], newVal[3]);
      });
    }
  }
);

// watch(
//   () => pureApp.sidebar.opened,
//   () => {
//     if(pureApp.sidebar.opened){
//      echartInstance.dispose();
//       echartInstance = null;
//       useTimeoutFn(() => {
//         nextTick(() => {
//           initechartInstance();
//         })
//       }, 300);
//     }
//   }
// );

const resetRender = () => {
  if (!echartInstance) return;
  useTimeoutFn(() => {
    echartInstance.resize();
  }, 180);
};

tryOnUnmounted(() => {
  if (!echartInstance) return;
  echartInstance.dispose();
  echartInstance = null;
  removeResizeListener(ExpenditureBar.value, resetRender);
});
</script>

<template>
  <div ref="ExpenditureBar">
    <div class="ExpenditureBar" ref="chart"></div>
  </div>
</template>

<style lang="scss" scoped>
.title {
  font-size: 16px;
  color: $defaultColor;
  margin: 10px 0;
  height: 24px;
}
.ExpenditureBar {
  width: 100%;
  height: 300px;
}
</style>
